<template>
  <div class="menuPage">
    <h1>Menu 导航菜单</h1>
    <p>为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。</p>
    <p>基础用法</p>
    <div>
      <span>收起导航栏</span>
      <div>
        <Input v-model="activeName" />
      </div>
      <sh-switch v-model="value" style="margin-bottom: 10px;">开启关闭</sh-switch>
      <Menu
        mode="ver"
        :active-name="activeName"
        :collapse="value"
        :expand="expand"
        @on-select="onselect"
      >
        <Submenu name="1">
          <template slot="title">
            <Icon class="menu-icon" type="icon-system" />
            <span>统计分析</span>
          </template>
          <Submenu name="3-1">
            <template slot="title">使用</template>
            <MenuItem name="3-1-1">新增和启动</MenuItem>
            <MenuItem name="3-1-2">活跃分析</MenuItem>
            <MenuItem name="3-1-3">时段分析</MenuItem>
          </Submenu>
          <Submenu name="3-2">
            <template slot="title">留存</template>
            <MenuItem name="3-2-1">用户留存</MenuItem>
            <MenuItem name="3-2-2">流失用户</MenuItem>
            <MenuItem to name="/index">首页</MenuItem>
          </Submenu>
          <MenuItem name="3-3">分析能力</MenuItem>
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon class="menu-icon" type="icon-basic-data" />
            <span>展示分析</span>
          </template>
          <MenuItem name="4-1">统计分析</MenuItem>
          <MenuItem name="4-2">时段分析</MenuItem>
          <MenuItem name="4-3">分析实验</MenuItem>
        </Submenu>
        <MenuItem name="3">
          <template slot="title">
            <Tooltip v-if="value" content="内容管理" placement="right">
              <Icon class="menu-icon" type="icon-order-management" />
              <span>内容管理</span>
            </Tooltip>
            <div v-else>
              <Icon class="menu-icon" type="icon-order-management" />
              <span>内容管理</span>
            </div>
          </template>
        </MenuItem>
        <MenuItem name="4">
          <template slot="title">
            <Tooltip v-if="value" content="用户管理" placement="right">
              <Icon class="menu-icon" type="icon-customer-management" />
              <span>用户管理</span>
            </Tooltip>
            <div v-else>
              <Icon class="menu-icon" type="icon-customer-management" />
              <span>用户管理</span>
            </div>
          </template>
        </MenuItem>
      </Menu>
      <p>代码示例：</p>
      <pre>
      &lt;template&gt;
        &lt;Menu mode=&quot;ver&quot; active-name=&#x27;3-1-1&#x27; :collapse=value :expand=&quot;expand&quot; @on-select=&quot;onselect&quot;&gt;
          &lt;Submenu name=&quot;1&quot;&gt;
            &lt;template slot=&quot;title&quot;&gt;
              &lt;Icon class=&quot;menu-icon&quot; type=&quot;icon-system&quot; /&gt;
              &lt;span&gt;统计分析&lt;/span&gt;
            &lt;/template&gt;
            &lt;Submenu name=&#x27;3-1&#x27;&gt;
              &lt;template slot=&quot;title&quot;&gt;使用&lt;/template&gt;
              &lt;MenuItem name=&quot;3-1-1&quot;&gt;新增和启动&lt;/MenuItem&gt;
              &lt;MenuItem name=&quot;3-1-2&quot;&gt;活跃分析&lt;/MenuItem&gt;
              &lt;MenuItem name=&quot;3-1-3&quot;&gt;时段分析&lt;/MenuItem&gt;
            &lt;/Submenu&gt;
            &lt;Submenu name=&#x27;3-2&#x27;&gt;
              &lt;template slot=&quot;title&quot;&gt;留存&lt;/template&gt;
              &lt;MenuItem name=&quot;3-2-1&quot;&gt;用户留存&lt;/MenuItem&gt;
              &lt;MenuItem name=&quot;3-2-2&quot;&gt;流失用户&lt;/MenuItem&gt;
              &lt;MenuItem to name=&#x27;/index&#x27;&gt;首页&lt;/MenuItem&gt;
            &lt;/Submenu&gt;
            &lt;MenuItem name=&quot;3-3&quot;&gt;分析能力&lt;/MenuItem&gt;
          &lt;/Submenu&gt;
          &lt;Submenu name=&quot;2&quot;&gt;
            &lt;template slot=&quot;title&quot;&gt;
              &lt;Icon class=&quot;menu-icon&quot; type=&quot;icon-basic-data&quot; /&gt;&lt;span&gt;展示分析&lt;/span&gt;
            &lt;/template&gt;
            &lt;MenuItem name=&quot;4-1&quot;&gt;统计分析&lt;/MenuItem&gt;
            &lt;MenuItem name=&#x27;4-2&#x27;&gt;时段分析&lt;/MenuItem&gt;
            &lt;MenuItem name=&#x27;4-3&#x27;&gt;分析实验&lt;/MenuItem&gt;
          &lt;/Submenu&gt;
          &lt;MenuItem name=&quot;3&quot;&gt;
            &lt;template slot=&quot;title&quot;&gt;
              &lt;Tooltip v-if=&quot;value&quot; content=&quot;内容管理&quot; placement=&quot;right&quot;&gt;
                &lt;Icon class=&quot;menu-icon&quot; type=&quot;icon-order-management&quot; /&gt;&lt;span&gt;内容管理&lt;/span&gt;
              &lt;/Tooltip&gt;
              &lt;div v-else&gt;
                &lt;Icon class=&quot;menu-icon&quot; type=&quot;icon-order-management&quot; /&gt;&lt;span&gt;内容管理&lt;/span&gt;
              &lt;/div&gt;
            &lt;/template&gt;
          &lt;/MenuItem&gt;
          &lt;MenuItem name=&quot;4&quot;&gt;
            &lt;template slot=&quot;title&quot;&gt;
              &lt;Tooltip v-if=&quot;value&quot; content=&quot;用户管理&quot; placement=&quot;right&quot;&gt;
                &lt;Icon class=&quot;menu-icon&quot; type=&quot;icon-customer-management&quot; /&gt;&lt;span&gt;用户管理&lt;/span&gt;
              &lt;/Tooltip&gt;
              &lt;div v-else&gt;
                &lt;Icon class=&quot;menu-icon&quot; type=&quot;icon-customer-management&quot; /&gt;&lt;span&gt;用户管理&lt;/span&gt;
              &lt;/div&gt;
            &lt;/template&gt;
          &lt;/MenuItem&gt;
        &lt;/Menu&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {

          }
        }
      }
      &lt;/script&gt;
    </pre>
    </div>
    <p>API</p>
    <p>Menu props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <p>Menu events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
    <p>MenuItem props</p>
    <Table :columns="tableColumn" :data="tableData2"></Table>
    <p>Submenu props</p>
    <Table :columns="tableColumn" :data="tableData2"></Table>
    <p>Submenu slot</p>
    <Table :columns="tableColumn2" :data="tableData3"></Table>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      expand: 'click',
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'mode',
          explain: '菜单类型，可选值为 hor（水平） 和 ver（垂直）',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'activeName',
          explain: '激活菜单的 name 值',
          type: 'String | Number',
          default: '-'
        },
        {
          attribute: 'openNames',
          explain: '展开的 Submenu 的 name 集合',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'accordion',
          explain: '是否开启手风琴模式，开启后每次至多展开一个子菜单',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'router',
          explain: '开启路由模式，否则是不做跳转的',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'collapse',
          explain: 'menu展开或关闭',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableColumn1: [
        {
          title: '事件名称',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '回调参数',
          key: 'callBack'
        }
      ],
      tableData1: [
        {
          attribute: 'on-select',
          explain: '选择菜单（MenuItem）时触发',
          callBack: 'name'
        },
        {
          attribute: 'on-open-change',
          explain: '当 展开/收起 子菜单时触发',
          callBack: '当前展开的 Submenu 的 name 值数组'
        }
      ],
      tableData2: [
        {
          attribute: 'name',
          explain: '子菜单的唯一标识，必填',
          type: 'String | Number',
          default: '-'
        }
      ],
      tableColumn2: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '说明',
          key: 'explain'
        }
      ],
      tableData3: [
        {
          name: 'title',
          explain: '子菜单标题'
        }
      ],
      value: true,
      activeName: '3-1-1'
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    value (val) {
      val ? (this.expand = 'hover') : (this.expand = 'click')
    }
  },
  // 方法集合
  methods: {
    onselect (item) {
      // console.log('Menu'+'    '+ item.label)
    },
    onActive (item) {
      // console.log(item)
    }
  }
}
</script>
<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p {
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
</style>
